<template>
  <div>
    <!-- 编辑管理员 -->
    <el-dialog title="修改管理员" @close="close" :visible.sync="dialogVisible" width="45%">

      <!-- 主体 -->
      <el-form ref="form" red="form" status-icon :rules="rules" :model="setUsers" label-width="80px">
        <el-form-item label="用户名" :show-message="false">
          <el-input v-model="SetUsersData.username" disabled></el-input>
        </el-form-item>
        <el-form-item required label="邮箱" prop="email">
          <el-input v-model="setUsers.email"></el-input>
        </el-form-item>
        <el-form-item required label="手机号码" prop="mobile">
          <el-input v-model="setUsers.mobile"></el-input>
        </el-form-item>
      </el-form>

      <!-- 按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="btnputUsers">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'SetUsers',
  data() {
    return {
      dialogVisible: this.diaSetUsers, 
      setUsers: {
        id: this.SetUsersData.id,
        email: '',
        mobile: ''
      },
      rules: {
        email: [
          {
            required: true,
            message: '请输入邮箱地址',
            trigger: ['change', 'blur'],
          },
          {
            type: 'email',
            message: '请输入合法邮箱',
            trigger: ['blur', 'change'],
          },
        ],
        mobile: [
          {
            required: true,
            message: '请输入手机号码',
            trigger: ['change', 'blur'],
          },
          {
            min: 11,
            max: 11,
            message: '请输入正确的手机号码',
            trigger: ['change', 'blur'],
          },
        ],
      }
    }
  },
  props: {
    diaSetUsers: Boolean,
    SetUsersData: Object
  },
  watch: {
    diaSetUsers() {
      this.dialogVisible = this.diaSetUsers
    },
  },
  methods: {
    close() {
      this.$emit('OutdiaSet')
      this.$refs.form.resetFields()
    },
    btnputUsers() {  //提交编辑按钮
      this.$refs.form.validate((res) => {
        if (res) {
          this.$http.put(`users/${this.SetUsersData.id}`, this.setUsers).then(res => {
            if (res.data.meta.status !== 200) return this.$mess(res.data.meta.msg, 'error')
            this.$mess(res.data.meta.msg, 'success')
            this.$emit('OutdiaSet')
            this.$emit('getUser')
          })
        }
      })
    }
  },
}
</script>

<style>
</style>